<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML文本与图片标签应用示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, #2c3e50, #3498db);
            color: white;
            padding: 40px 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.3rem;
            opacity: 0.9;
            font-weight: 300;
        }
        
        .content {
            padding: 40px;
        }
        
        .section {
            margin-bottom: 50px;
            padding: 30px;
            border-radius: 10px;
            background: #f8f9fa;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        h2 {
            color: #2c3e50;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid #3498db;
            font-size: 2rem;
        }
        
        h3 {
            color: #3498db;
            margin: 25px 0 15px;
            font-size: 1.5rem;
        }
        
        .text-examples {
            background: white;
            padding: 25px;
            border-radius: 8px;
            border-left: 5px solid #e74c3c;
        }
        
        .image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }
        
        .image-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .image-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }
        
        .image-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }
        
        .image-info {
            padding: 20px;
        }
        
        .image-title {
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        
        .image-desc {
            color: #7f8c8d;
            font-size: 0.95rem;
        }
        
        .code-block {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        
        .tag {
            color: #e74c3c;
        }
        
        .attr {
            color: #3498db;
        }
        
        .value {
            color: #2ecc71;
        }
        
        .text-content {
            margin: 15px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 5px;
            border-left: 3px solid #3498db;
        }
        
        footer {
            text-align: center;
            padding: 30px;
            background: #2c3e50;
            color: #ecf0f1;
            margin-top: 30px;
        }
        
        @media (max-width: 768px) {
            .image-gallery {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .content {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>HTML文本与图片标签应用</h1>
            <p class="subtitle">掌握HTML文本格式化和图片展示的核心技术</p>
        </header>
        
        <div class="content">
            <!-- 文本标签部分 -->
            <div class="section">
                <h2>HTML文本标签应用</h2>
                
                <div class="text-examples">
                    <h3>标题标签</h3>
                    <div class="code-block">
                        <span class="tag">&lt;h1&gt;</span>一级标题<span class="tag">&lt;/h1&gt;</span><br>
                        <span class="tag">&lt;h2&gt;</span>二级标题<span class="tag">&lt;/h2&gt;</span><br>
                        <span class="tag">&lt;h3&gt;</span>三级标题<span class="tag">&lt;/h3&gt;</span>
                    </div>
                    
                    <div class="text-content">
                        <h1>这是一级标题 (h1)</h1>
                        <h2>这是二级标题 (h2)</h2>
                        <h3>这是三级标题 (h3)</h3>
                    </div>
                    
                    <h3>段落与文本格式化</h3>
                    <div class="code-block">
                        <span class="tag">&lt;p&gt;</span>这是一个段落<span class="tag">&lt;/p&gt;</span><br>
                        <span class="tag">&lt;strong&gt;</span>加粗文本<span class="tag">&lt;/strong&gt;</span><br>
                        <span class="tag">&lt;em&gt;</span>斜体文本<span class="tag">&lt;/em&gt;</span><br>
                        <span class="tag">&lt;u&gt;</span>下划线文本<span class="tag">&lt;/u&gt;</span><br>
                        <span class="tag">&lt;mark&gt;</span>高亮文本<span class="tag">&lt;/mark&gt;</span>
                    </div>
                    
                    <div class="text-content">
                        <p>这是一个标准的段落文本，用于展示大段的文字内容。</p>
                        <p>这是<strong>加粗文本</strong>，这是<em>斜体文本</em>，这是<u>下划线文本</u>，这是<mark>高亮文本</mark>。</p>
                    </div>
                    
                    <h3>列表标签</h3>
                    <div class="code-block">
                        <span class="tag">&lt;ul&gt;</span><br>
                        &nbsp;&nbsp;<span class="tag">&lt;li&gt;</span>无序列表项1<span class="tag">&lt;/li&gt;</span><br>
                        &nbsp;&nbsp;<span class="tag">&lt;li&gt;</span>无序列表项2<span class="tag">&lt;/li&gt;</span><br>
                        <span class="tag">&lt;/ul&gt;</span><br><br>
                        
                        <span class="tag">&lt;ol&gt;</span><br>
                        &nbsp;&nbsp;<span class="tag">&lt;li&gt;</span>有序列表项1<span class="tag">&lt;/li&gt;</span><br>
                        &nbsp;&nbsp;<span class="tag">&lt;li&gt;</span>有序列表项2<span class="tag">&lt;/li&gt;</span><br>
                        <span class="tag">&lt;/ol&gt;</span>
                    </div>
                    
                    <div class="text-content" style="display: flex; gap: 40px;">
                        <div>
                            <strong>无序列表：</strong>
                            <ul>
                                <li>HTML基础</li>
                                <li>CSS样式</li>
                                <li>JavaScript编程</li>
                            </ul>
                        </div>
                        <div>
                            <strong>有序列表：</strong>
                            <ol>
                                <li>学习HTML</li>
                                <li>掌握CSS</li>
                                <li>精通JavaScript</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 图片标签部分 -->
            <div class="section">
                <h2>HTML图片标签应用</h2>
                
                <div class="image-gallery">
                    <div class="image-card">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="人物肖像">
                        <div class="image-info">
                            <div class="image-title">基本图片展示</div>
                            <div class="image-desc">使用img标签的src和alt属性展示图片</div>
                        </div>
                    </div>
                    
                    <div class="image-card">
                        <img src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="日本寺庙">
                        <div class="image-info">
                            <div class="image-title">响应式图片</div>
                            <div class="image-desc">使用CSS实现图片的自适应布局</div>
                        </div>
                    </div>
                    
                    <div class="image-card">
                        <img src="https://images.unsplash.com/photo-1464822759849-e30ccb4d916f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="山脉风景">
                        <div class="image-info">
                            <div class="image-title">图片悬停效果</div>
                            <div class="image-desc">通过CSS添加交互效果提升用户体验</div>
                        </div>
                    </div>
                </div>
                
                <h3>图片标签代码示例</h3>
                <div class="code-block">
                    <span class="tag">&lt;img</span> <span class="attr">src=</span><span class="value">"image.jpg"</span> <span class="attr">alt=</span><span class="value">"图片描述"</span> <span class="attr">width=</span><span class="value">"500"</span> <span class="attr">height=</span><span class="value">"300"</span><span class="tag">&gt;</span><br><br>
                    
                    <span class="tag">&lt;figure&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;img</span> <span class="attr">src=</span><span class="value">"image.jpg"</span> <span class="attr">alt=</span><span class="value">"图片描述"</span><span class="tag">&gt;</span><br>
                    &nbsp;&nbsp;<span class="tag">&lt;figcaption&gt;</span>图片标题或描述<span class="tag">&lt;/figcaption&gt;</span><br>
                    <span class="tag">&lt;/figure&gt;</span>
                </div>
                
                <div class="text-content">
                    <h4>图片标签的重要属性：</h4>
                    <ul>
                        <li><strong>src</strong>: 指定图片的URL路径</li>
                        <li><strong>alt</strong>: 提供图片的替代文本，用于无障碍访问和SEO</li>
                        <li><strong>width/height</strong>: 设置图片的显示尺寸</li>
                        <li><strong>loading</strong>: 控制图片的懒加载行为</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <footer>
            <p>HTML文本与图片标签应用示例 &copy; 2023 | 前端开发学习资源</p>
        </footer>
    </div>
</body>
</html>